<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { ElNotification, type UploadFile } from 'element-plus'
import axios from 'axios'


// do not use same name with ref
const form = reactive({
  name: '',
  zhuY: '',
  director: '',
  date: '',
  time: '',
  lei: ''
})

const open = () => {
  const data = new FormData()
  data.append('name', form.name)
  data.append('zhuY', form.zhuY)
  data.append('director', form.director)
  data.append('date', form.date)
  data.append('time', form.time)
  data.append('lei', form.lei)
  data.append('file', dialogImageUrl.value.raw)
  axios.post('/api/file/setFile', data, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  })
  ElNotification.success({
    title: 'Info',
    message: '添加成功',
    showClose: false

  })
  fileToBase64(dialogImageUrl.value.raw)

}

const dialogImageUrl = ref()
const disabled = ref(false)
const handleRemove = (file: UploadFile) => {
  console.log(file)

}


const emitEvents = defineEmits(['son-click'])
const sonClick = () => {
  emitEvents('son-click', '')
}

function filec(file: UploadFile) {
  dialogImageUrl.value = file
}

// 获取文件对象

function fileToBase64(file: UploadFile) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {

    // e.target.result 即为base64结果
    console.log(e.target.result);
    emitEvents('son-click',
      {
        'name': form.name,
        'zhu': form.zhuY,
        'director': form.director,
        'date': form.date,
        'time': form.time,
        'lei': form.lei,
        'img_url': e.target.result,
        'zhang':'0',
        'chai':'0'
      })
  };
}

/**
 * @description 解析proxy数据为普通数据
 * @param value
 */


</script>

<template>
  <div class="comment-form">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="电影名：">
        <el-input v-model="form.name" type="text" />
      </el-form-item>
      <el-form-item label="导演：">
        <el-input v-model="form.director" type="text" />
      </el-form-item>
      <el-form-item label="主演：">
        <el-input v-model="form.zhuY" type="text" />
      </el-form-item>
      <el-form-item label="上映时间及时长：">
        <el-col :span="11">
          <el-input v-model="form.date" placeholder="上映时间" type="text" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-input v-model="form.time" placeholder="时长" type="text" />
        </el-col>
      </el-form-item>
      <el-form-item label="类型：">
        <el-input v-model="form.lei" />
      </el-form-item>


      <el-form-item label="海报：">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span :v-model="filec(file)" class="el-upload-list__item-actions">

          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <div class="butt">

        <el-button type="primary" @click="open"> 确认</el-button>
        <el-button type="danger" @click="sonClick()">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.butt {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.comment-form {
  background-color: white;
  position: absolute;
  padding: 38px;
  top: 60px;
  z-index: 4;
  right: 100px;
  border-radius: 10px;
  border: 1px solid #cee3ff;
}

/deep/ .el-input__inner {
  color: rgba(0, 0, 0, 0.89);
}


:deep .el-input__wrapper {
  background-color: rgba(13, 16, 13, 0) !important;

}

:deep .el-input-group__append {
  background-color: rgba(0, 0, 0, 0) !important;

}
</style>